<template>
  <div class="login-container">
    <van-nav-bar title="登录">
      <van-icon slot="left" name="cross" @click="$router.back()"></van-icon>
    </van-nav-bar>
    <!-- form表单模块 -->
    <van-form ref="loginForm" @submit="onSubmit">
      <van-cell-group inset>
        <van-field type="number" maxlength="11" v-model="user.mobile" name="mobile" placeholder="请输入手机号码" :rules="userFormRules.mobile">
          <i slot="left-icon" class="iconfont icon-shouji"></i>
        </van-field>

        <van-field type="number" maxlength="6" v-model="user.code" name="code" placeholder="请输入验证码">
          <i slot="left-icon" class="iconfont icon-yanzhengma"></i>
          <template #button>
            <van-count-down :time="1000 * 60" format="ss s" v-if="isCountDownShow" @finish="isCountDownShow= false" />
            <van-button round class="send-sms-btn" size="small" type="default" @click="onSendSms" native-type="button" v-else>发送验证码</van-button>
          </template>
        </van-field>
      </van-cell-group>
      <div class="login-btn-wrap">
        <van-button block type="primary" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login, sendSms } from '@/api/users.js'

export default {
  name: 'LoginIndex',
  data() {
    return {
      user: {
        mobile: '', // 这是手机号
        code: '' // 这是验证码
      },
      userFormRules: {
        mobile: [
          { required: true, message: '请填写手机号' },
          { pattern: /^1[3|5|7|8]\d{9}$/, message: '手机号格式错误' }
        ],
        code: [
          { required: true, message: '请填写验证码' },
          { pattern: /^\d{6}$/, message: '验证码格式输入错误' }
        ]
      },
      isCountDownShow: false // 来控制验证码显示与隐藏
    }
  },
  methods: {
    async onSubmit() {
      // 1. 获取表单数据
      const user = this.user
      // 2.验证表单数据

      this.$toast.loading({
        message: '登陆中...',
        forbidClick: true,
        duration: 0
      })
      // 3.提交表单请求登录
      try {
        const { data } = await login(user)
        // console.log('登录成功', data)
        this.$store.commit('setUser', data.data)
        this.$toast.success('登录成功')
        this.$router.back()
      } catch (err) {
        if (err) {
          console.log('手机号或验证码输入错误')
          this.$toast.fail('手机号或验证码输入错误')
        } else {
          // console.log('登陆失败', err)
          this.$toast.fail('登陆失败')
        }
      }
      // 4. 根据请求结果处理后序操作
    },
    async onSendSms() {
      try {
        await this.$refs.loginForm.validate('mobile')
        // console.log('success')
      } catch (err) {
        return console.log('验证失败', err)
      }
      // 验证通过 显示倒计时
      this.isCountDownShow = true
      // 请求发送验证码
      try {
        const res = await sendSms(this.user.mobile)
        this.$toast('发送成功')
        console.log('successss', res)
      } catch (err) {
        this.isCountDownShow = false
        if (err.status === 429) {
          this.$toast('发送太频繁')
        } else {
          this.$toast('发送失败')
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #3296fa;
  /deep/.van-icon {
    color: #fff;
  }
}
/deep/.van-nav-bar__title {
  color: #fff;
}
.login-container .iconfont {
  font-size: 37px;
}
.send-sms-btn {
  background-color: #ededed;
  width: 156px;
  height: 48px;
  line-height: 46px;
  font-size: 22px;
  color: #666;
}
.login-btn-wrap {
  padding: 53px 33px;
  .van-button--primary {
    background-color: #6db4fb;
    border: none;
  }
  /deep/.van-icon {
    color: #fff;
  }
}
</style>
